<template>
  <div class="animation-demo">
    <div class="demo-header">
      <h2>动画效果演示</h2>
      <div class="demo-controls">
        <button 
          class="demo-btn interactive-animation"
          @click="toggleAnimations"
          :class="{ active: animationsEnabled }"
        >
          {{ animationsEnabled ? '禁用动画' : '启用动画' }}
        </button>
        <button 
          class="demo-btn interactive-animation"
          @click="resetAllAnimations"
        >
          重置动画
        </button>
      </div>
    </div>

    <div class="demo-sections">
      <!-- 角色动画演示 -->
      <div class="demo-section">
        <h3>角色动画</h3>
        <div class="character-demo">
          <div 
            ref="characterRef"
            class="demo-character hardware-accelerated optimized-animation"
            :class="{ 'character-animation': true, [currentCharacterAnimation]: isCharacterAnimating }"
          >
            🏃‍♂️
          </div>
          <div class="character-controls">
            <button 
              class="demo-btn interactive-animation"
              @click="playCharacterAnimation('running')"
            >
              跑步
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="playCharacterAnimation('jumping')"
            >
              跳跃
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="playCharacterAnimation('sliding')"
            >
              滑铲
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="playCharacterAnimation('hurt')"
            >
              受伤
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="playCharacterAnimation('victory')"
            >
              胜利
            </button>
          </div>
        </div>
      </div>

      <!-- UI过渡动画演示 -->
      <div class="demo-section">
        <h3>UI过渡动画</h3>
        <div class="ui-demo">
          <div class="ui-demo-area">
            <div 
              ref="uiElementRef"
              class="demo-ui-element hardware-accelerated optimized-animation"
              :class="{ 'ui-transition': true, [currentUIAnimation]: isUIAnimating }"
            >
              <div class="demo-content">
                <h4>演示元素</h4>
                <p>这是一个UI动画演示元素</p>
              </div>
            </div>
          </div>
          <div class="ui-controls">
            <button 
              class="demo-btn interactive-animation"
              @click="playUIAnimation('fade-in')"
            >
              淡入
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="playUIAnimation('slide-in-top')"
            >
              从上滑入
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="playUIAnimation('slide-in-left')"
            >
              从左滑入
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="playUIAnimation('scale-in')"
            >
              缩放进入
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="playUIAnimation('bounce-in')"
            >
              弹跳进入
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="playUIAnimation('rotate-in')"
            >
              旋转进入
            </button>
          </div>
        </div>
      </div>

      <!-- 游戏特效动画演示 -->
      <div class="demo-section">
        <h3>游戏特效动画</h3>
        <div class="effects-demo">
          <div class="effects-area">
            <div 
              v-for="(effect, index) in gameEffects"
              :key="effect.id"
              class="demo-effect hardware-accelerated optimized-animation"
              :class="{ 'game-effect': true, [effect.type]: effect.active }"
              :style="{ 
                left: effect.x + 'px', 
                top: effect.y + 'px',
                fontSize: effect.size + 'px'
              }"
            >
              {{ effect.icon }}
            </div>
          </div>
          <div class="effects-controls">
            <button 
              class="demo-btn interactive-animation"
              @click="createGameEffect('score-fly', '💰', 24)"
            >
              分数飞出
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="createGameEffect('powerup-collect', '⭐', 32)"
            >
              道具收集
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="createGameEffect('explosion', '💥', 40)"
            >
              爆炸效果
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="createGameEffect('glow', '✨', 28)"
            >
              发光效果
            </button>
            <button 
              class="demo-btn interactive-animation"
              @click="createGameEffect('rainbow', '🌈', 36)"
            >
              彩虹效果
            </button>
          </div>
        </div>
      </div>

      <!-- 交互动画演示 -->
      <div class="demo-section">
        <h3>交互动画</h3>
        <div class="interactive-demo">
          <div class="interactive-elements">
            <button class="demo-card interactive-animation card">
              <div class="card-content">
                <h4>悬停卡片</h4>
                <p>鼠标悬停查看效果</p>
              </div>
            </button>
            
            <div class="icon-demo">
              <div class="demo-icon icon-animation spin">🔄</div>
              <div class="demo-icon icon-animation pulse">💓</div>
              <div class="demo-icon icon-animation wiggle">🔔</div>
            </div>

            <div class="button-demo">
              <button class="demo-btn interactive-animation primary">主要按钮</button>
              <button class="demo-btn interactive-animation secondary">次要按钮</button>
              <button class="demo-btn interactive-animation danger">危险按钮</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 性能监控 -->
    <div class="performance-monitor">
      <div class="monitor-item">
        <span class="monitor-label">活动动画:</span>
        <span class="monitor-value">{{ activeAnimationCount }}</span>
      </div>
      <div class="monitor-item">
        <span class="monitor-label">FPS:</span>
        <span class="monitor-value">{{ currentFPS }}</span>
      </div>
      <div class="monitor-item">
        <span class="monitor-label">动画状态:</span>
        <span class="monitor-value" :class="{ active: animationsEnabled }">
          {{ animationsEnabled ? '启用' : '禁用' }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { animationController, AnimationType, type AnimationConfig } from '@/game/AnimationController'

/**
 * 动画演示组件
 * 展示各种CSS3动画效果和性能监控
 * @component
 */

// 响应式数据
const characterRef = ref<HTMLElement>()
const uiElementRef = ref<HTMLElement>()

const animationsEnabled = ref(true)
const isCharacterAnimating = ref(false)
const isUIAnimating = ref(false)
const currentCharacterAnimation = ref('')
const currentUIAnimation = ref('')
const activeAnimationCount = ref(0)
const currentFPS = ref(60)

// 游戏特效数据
interface GameEffect {
  id: string
  type: string
  icon: string
  x: number
  y: number
  size: number
  active: boolean
}

const gameEffects = ref<GameEffect[]>([])
let effectIdCounter = 0

// 性能监控
let fpsCounter = 0
let lastTime = performance.now()
let fpsInterval: number | null = null

/**
 * 播放角色动画
 * @param animationType - 动画类型
 */
const playCharacterAnimation = (animationType: string): void => {
  if (!characterRef.value || !animationsEnabled.value) return

  // 停止当前动画
  animationController.stopElementAnimations(characterRef.value)

  currentCharacterAnimation.value = animationType
  isCharacterAnimating.value = true

  const config: AnimationConfig = {
    type: getAnimationType(`CHARACTER_${animationType.toUpperCase()}`),
    duration: getAnimationDuration(animationType),
    iterations: animationType === 'running' ? 'infinite' : 1,
    onComplete: () => {
      if (animationType !== 'running') {
        isCharacterAnimating.value = false
        currentCharacterAnimation.value = ''
      }
    }
  }

  animationController.playAnimation(characterRef.value, config)
}

/**
 * 播放UI动画
 * @param animationType - 动画类型
 */
const playUIAnimation = (animationType: string): void => {
  if (!uiElementRef.value || !animationsEnabled.value) return

  // 停止当前动画
  animationController.stopElementAnimations(uiElementRef.value)

  currentUIAnimation.value = animationType
  isUIAnimating.value = true

  const config: AnimationConfig = {
    type: getAnimationType(animationType.toUpperCase().replace('-', '_')),
    duration: 500,
    onComplete: () => {
      isUIAnimating.value = false
      currentUIAnimation.value = ''
    }
  }

  animationController.playAnimation(uiElementRef.value, config)
}

/**
 * 创建游戏特效
 * @param effectType - 特效类型
 * @param icon - 特效图标
 * @param size - 特效大小
 */
const createGameEffect = (effectType: string, icon: string, size: number): void => {
  if (!animationsEnabled.value) return

  const effect: GameEffect = {
    id: `effect_${++effectIdCounter}`,
    type: effectType,
    icon,
    x: Math.random() * 300,
    y: Math.random() * 200,
    size,
    active: false
  }

  gameEffects.value.push(effect)

  nextTick(() => {
    effect.active = true

    // 设置特效移除定时器
    setTimeout(() => {
      const index = gameEffects.value.findIndex(e => e.id === effect.id)
      if (index !== -1) {
        gameEffects.value.splice(index, 1)
      }
    }, getEffectDuration(effectType))
  })
}

/**
 * 获取动画类型枚举
 * @param typeString - 类型字符串
 * @returns 动画类型枚举
 */
const getAnimationType = (typeString: string): AnimationType => {
  return (AnimationType as any)[typeString] || AnimationType.FADE_IN
}

/**
 * 获取动画持续时间
 * @param animationType - 动画类型
 * @returns 持续时间（毫秒）
 */
const getAnimationDuration = (animationType: string): number => {
  const durations: Record<string, number> = {
    running: 600,
    jumping: 800,
    sliding: 600,
    hurt: 500,
    victory: 1000
  }
  return durations[animationType] || 500
}

/**
 * 获取特效持续时间
 * @param effectType - 特效类型
 * @returns 持续时间（毫秒）
 */
const getEffectDuration = (effectType: string): number => {
  const durations: Record<string, number> = {
    'score-fly': 1000,
    'powerup-collect': 500,
    'explosion': 800,
    'glow': 2000,
    'rainbow': 3000
  }
  return durations[effectType] || 1000
}

/**
 * 切换动画启用状态
 */
const toggleAnimations = (): void => {
  animationsEnabled.value = !animationsEnabled.value
  animationController.setEnabled(animationsEnabled.value)
  
  if (!animationsEnabled.value) {
    resetAllAnimations()
  }
}

/**
 * 重置所有动画
 */
const resetAllAnimations = (): void => {
  animationController.stopAllAnimations()
  isCharacterAnimating.value = false
  isUIAnimating.value = false
  currentCharacterAnimation.value = ''
  currentUIAnimation.value = ''
  gameEffects.value = []
}

/**
 * 更新性能监控数据
 */
const updatePerformanceMonitor = (): void => {
  activeAnimationCount.value = animationController.getActiveAnimationCount()
  
  // 计算FPS
  const now = performance.now()
  fpsCounter++
  
  if (now - lastTime >= 1000) {
    currentFPS.value = Math.round((fpsCounter * 1000) / (now - lastTime))
    fpsCounter = 0
    lastTime = now
  }
}

/**
 * 启动性能监控
 */
const startPerformanceMonitoring = (): void => {
  fpsInterval = window.setInterval(updatePerformanceMonitor, 100)
}

/**
 * 停止性能监控
 */
const stopPerformanceMonitoring = (): void => {
  if (fpsInterval) {
    clearInterval(fpsInterval)
    fpsInterval = null
  }
}

// 生命周期钩子
onMounted(() => {
  startPerformanceMonitoring()
})

onUnmounted(() => {
  stopPerformanceMonitoring()
  resetAllAnimations()
})
</script>

<style lang="scss" scoped>
.animation-demo {
  padding: $spacing-lg;
  background: $bg-secondary;
  border-radius: $border-radius-lg;
  max-width: 1200px;
  margin: 0 auto;

  .demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $spacing-xl;
    padding-bottom: $spacing-lg;
    border-bottom: 2px solid $primary-color;

    h2 {
      color: $primary-color;
      margin: 0;
    }

    .demo-controls {
      display: flex;
      gap: $spacing-sm;
    }
  }

  .demo-sections {
    display: grid;
    gap: $spacing-xl;
  }

  .demo-section {
    background: white;
    padding: $spacing-lg;
    border-radius: $border-radius-md;
    box-shadow: $shadow-md;

    h3 {
      color: $text-color;
      margin: 0 0 $spacing-lg 0;
      padding-bottom: $spacing-sm;
      border-bottom: 1px solid $bg-secondary;
    }
  }

  // 角色动画演示样式
  .character-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $spacing-lg;

    .demo-character {
      font-size: 4rem;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, $primary-color, $secondary-color);
      border-radius: 50%;
      box-shadow: $shadow-lg;
    }

    .character-controls {
      display: flex;
      flex-wrap: wrap;
      gap: $spacing-sm;
      justify-content: center;
    }
  }

  // UI动画演示样式
  .ui-demo {
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;

    .ui-demo-area {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: $bg-secondary;
      border-radius: $border-radius-md;
      position: relative;
      overflow: hidden;

      .demo-ui-element {
        background: white;
        padding: $spacing-lg;
        border-radius: $border-radius-md;
        box-shadow: $shadow-md;
        text-align: center;

        .demo-content {
          h4 {
            margin: 0 0 $spacing-sm 0;
            color: $primary-color;
          }

          p {
            margin: 0;
            color: $text-secondary;
          }
        }
      }
    }

    .ui-controls {
      display: flex;
      flex-wrap: wrap;
      gap: $spacing-sm;
      justify-content: center;
    }
  }

  // 游戏特效演示样式
  .effects-demo {
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;

    .effects-area {
      height: 250px;
      background: linear-gradient(135deg, #87CEEB, #98FB98);
      border-radius: $border-radius-md;
      position: relative;
      overflow: hidden;

      .demo-effect {
        position: absolute;
        pointer-events: none;
        z-index: 10;
      }
    }

    .effects-controls {
      display: flex;
      flex-wrap: wrap;
      gap: $spacing-sm;
      justify-content: center;
    }
  }

  // 交互动画演示样式
  .interactive-demo {
    .interactive-elements {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: $spacing-lg;
      align-items: start;

      .demo-card {
        background: white;
        border: 2px solid $bg-secondary;
        border-radius: $border-radius-md;
        padding: $spacing-lg;
        cursor: pointer;
        transition: $transition-normal;

        .card-content {
          h4 {
            margin: 0 0 $spacing-sm 0;
            color: $primary-color;
          }

          p {
            margin: 0;
            color: $text-secondary;
            font-size: 0.875rem;
          }
        }
      }

      .icon-demo {
        display: flex;
        gap: $spacing-lg;
        justify-content: center;

        .demo-icon {
          font-size: 2rem;
          width: 60px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: $accent-color;
          border-radius: 50%;
          color: white;
        }
      }

      .button-demo {
        display: flex;
        flex-direction: column;
        gap: $spacing-sm;
      }
    }
  }

  // 按钮样式
  .demo-btn {
    padding: $spacing-sm $spacing-md;
    border: none;
    border-radius: $border-radius-sm;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: $transition-normal;
    background: $primary-color;
    color: white;

    &.active {
      background: $success-color;
    }

    &.primary {
      background: $primary-color;
    }

    &.secondary {
      background: $secondary-color;
    }

    &.danger {
      background: $danger-color;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  // 性能监控样式
  .performance-monitor {
    margin-top: $spacing-xl;
    padding: $spacing-md;
    background: $bg-dark;
    color: white;
    border-radius: $border-radius-md;
    display: flex;
    gap: $spacing-lg;
    justify-content: center;
    font-family: 'Courier New', monospace;

    .monitor-item {
      display: flex;
      gap: $spacing-xs;

      .monitor-label {
        opacity: 0.8;
      }

      .monitor-value {
        font-weight: bold;

        &.active {
          color: $success-color;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: $breakpoint-md) {
  .animation-demo {
    padding: $spacing-md;

    .demo-header {
      flex-direction: column;
      gap: $spacing-md;
      text-align: center;
    }

    .character-demo .demo-character {
      font-size: 3rem;
      width: 80px;
      height: 80px;
    }

    .ui-demo .ui-demo-area {
      height: 150px;
    }

    .effects-demo .effects-area {
      height: 200px;
    }

    .interactive-demo .interactive-elements {
      grid-template-columns: 1fr;
    }

    .performance-monitor {
      flex-direction: column;
      gap: $spacing-sm;
      text-align: center;
    }
  }
}
</style>